<template>
  <el-container>
    <el-aside style="padding:0px 10px 0 0;width:260px; box-sizing: border-box" v-loading="treeLoading">
      <avue-tree :option="treeOption" :data="treeData" @node-click="handleTreeClick" style="height: calc(100% - 40px)"
        ref="treeRef" @save="handleTreeSave" @update="handleTreeUpdate" @del="handleTreeDel"></avue-tree>
    </el-aside>
    <el-main>
      <basic-crud v-model:formData="formData" v-model:search="searchFormData" :option="option" ref="basicCrudRef"
        :beforeOpen="handleBeforeOpen" businessUrl="/bd/customerController" :apiListParams="apiListParams"
        :apiAddParams="apiListParams">
      </basic-crud>
    </el-main>
  </el-container>
</template>

<script setup>
import { getCrudFunByBaseUrl } from '@/utils/index.js'
import { ElMessage } from 'element-plus'
// 获取左侧树的增删改查接口
const { apiAdd, apiEdit, apiDel, apiRefer } = getCrudFunByBaseUrl('/bd/customerClassifyController')
const searchFormData = ref({})
const basicCrudRef = ref()
const treeData = ref([])
const formData = ref({})
const treeOption = ref({
  defaultExpandAll: true,
  nodeKey: 'id',
  props: {
    label: 'name',
    value: 'id',
    children: 'children',
  },
  formOption: {
    column: [
      {
        label: '编号',
        prop: 'code',
        search: true,
        rules: [{ required: true, message: '请输入编号', trigger: 'blur' }],
      },
      {
        label: '名称',
        prop: 'name',
        search: true,
        sortable: true,
        rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      },
      {
        label: '描述',
        prop: 'des',
      },
      {
        label: '排序',
        prop: 'orderNum',
        type: 'number',
        step: 10
      },
    ],
  }
})
const treeLoading = ref(true)
const handleTreeSave = (parent, data, done, loading) => {
  if (parent.key) {
    data.parentId = parent.key
  } else {
    data.parentId = 'root'
  }
  apiAdd(data).then(res => {
    ElMessage.success('新增成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  })
}

const handleTreeUpdate = (parent, data, done, loading) => {
  apiEdit(data).then(res => {
    ElMessage.success('编辑成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  })
}
const handleTreeDel = (data, done) => {
  const loadingInstance = ElLoading.service({ text: '删除中...' })
  apiDel(data.key).then(res => {
    ElMessage.success('删除成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  }).finally(() => {
    loadingInstance.close()
  })
}
// 获取树结构数据
const getTreeList = async () => {
  treeData.value = await apiRefer({}, treeLoading) || []
}

const treeRef = ref()
const apiListParams = ref({
  customerClassify: undefined
})
const handleTreeClick = (data) => {
  basicCrudRef.value.pageData.currentPage = 1
  basicCrudRef.value.pageData.pageSize = 20
  apiListParams.value.customerClassify = data.id
}
getTreeList()

const option = ref({
  menuWidth: 180,
  searchSpan: 8,
  selection: true,
  column: [
    {
      label: "编号",
      prop: "code",
      sortable: "custom",
      search: true,
      searchLabelWidth: 120,
      rules: [{ required: true, message: "编号不能为空" }],
      width: 150,
    },
    {
      label: "名称",
      rules: [{ required: true, message: "名称不能为空" }],
      prop: "name",
      search: true,
      sortable: true,
      width: 150,
    },
    {
      label: "英文名称",
      prop: "englishName",
      sortable: true,
      width: 150,
    },
    {
      label: "简称",
      prop: "shotName",
      search: true,
      sortable: true,
      width: 150,
    },
    {
      label: "客户销售分类",
      prop: "customerSaleClassifyName",
      fieldKey: 'customerSaleClassify',
      sortable: true,
      component: 'BasicCrudInputTree',
      referUrl: '/bd/customerSaleClassifyController/referGrid',
      saveFieldMap: { customerSaleClassifyName: 'name', customerSaleClassify: 'id' },
      curForm: formData,
      change: (val) => {
        formData.value = val
      },
      width: 150,
    },
    {
      label: "所在城市",
      prop: "cityIdName",
      fieldKey: 'cityId',
      sortable: true,
      component: 'BasicCrudInputTree',
      referType: 'city',
      saveFieldMap: { cityIdName: 'name', cityId: 'id' },
      curForm: formData,
      change: (val) => {
        formData.value = val
      },
      width: 150,
    },
    {
      label: "地址",
      prop: "address",
      sortable: true,
      search: true,
      width: 150,
    },
    {
      label: "法人",
      prop: "principal",
      sortable: true,
      width: 150,
    },
    {
      label: "统一社会信用号",
      prop: "taxCode",
      search: true,
      sortable: true,
      searchLabelWidth: 120,
      width: 150,
    },
    {
      label: "电话",
      prop: "tel",
      search: true,
      sortable: true,
      width: 150,
    },
    {
      label: "传真",
      prop: "fax",
      sortable: true,
      width: 150,
    },
    {
      label: "官网",
      prop: "url",
      sortable: true,
      width: 150,
    },
    {
      label: "邮箱地址",
      prop: "email",
      sortable: true,
      width: 150,
    },
    {
      label: "邮政编号",
      prop: "zipcode",
      sortable: true,
      width: 150,
    },
    {
      label: "所在省份",
      prop: "province",
      sortable: true,
      component: 'BasicCrudInputTree',
      referType: 'province',
      saveFieldMap: { province: 'name' },
      curForm: formData,
      change: (val) => {
        formData.value = val
      },
      comProps: {
        props: {
          label: 'name',
          value: 'name',
        }
      },
      width: 150,
    },
    {
      label: "公司规模",
      type: "select",
      prop: "orgScale",
      sortable: true,
      dicCode: "orgScale",
      sortField: "orgScale",
      width: 150,
    },
    {
      label: "企业类型",
      type: "select",
      prop: "orgType",
      sortable: true,
      search: true,
      dicCode: "orgType",
      width: 150,
    },
    {
      label: "注册资金",
      prop: "registeredCapital",
      sortable: true,
      width: 150,
    },
  ]
})

const handleBeforeOpen = (done, type, loading) => {
  if (!apiListParams.value.customerClassify && type === 'add') {
    return ElMessage.warning('请选择客户分类！')
  }
  done()
}



</script>

<style lang="scss" scoped></style>
